<template>
    <el-card v-loading="loading">
        <div style="display: flex;justify-content: space-between">
            <el-form status-icon label-width="140" label-position="right" style="width: 70%;"
                     :show-message="show" :hide-required-asterisk="!show"
                     ref="infoRef" :model="infoForm" :rules="rules">
                <el-form-item prop="name" label="姓名">
                    <div style="padding-left: 30%">
                        <el-input v-show="show" clearable placeholder="请输入姓名" v-model="infoForm.name"></el-input>
                        <el-text v-show="!show">{{ info.name || '无' }}</el-text>
                    </div>
                </el-form-item>
                <el-form-item prop="title" label="职称">
                    <div style="padding-left: 30%">
                        <el-input v-show="show" clearable placeholder="请输入职称"
                                  v-model.number="infoForm.title"></el-input>
                        <el-text v-show="!show">{{ info.title || '无' }}</el-text>
                    </div>
                </el-form-item>
                <el-form-item prop="school" label="所在院校">
                    <div style="padding-left: 30%">
                        <el-input v-show="show" clearable placeholder="请输入所在院校"
                                  v-model="infoForm.school"></el-input>
                        <el-text v-show="!show">{{ info.school || '无' }}</el-text>
                    </div>
                </el-form-item>
                <el-form-item prop="dept" label="部门">
                    <div style="padding-left: 30%">
                        <div v-show="show">
                            <el-autocomplete clearable placeholder="请输入部门"
                                             v-model="infoForm.dept" :fetch-suggestions="querySearch"
                            />
                        </div>
                        <el-text v-show="!show">{{ info.dept || '无' }}</el-text>
                    </div>
                </el-form-item>
            </el-form>
            <el-button style="align-items: flex-start;" link @click="edit" v-show="!show">
                <el-icon>
                    <EditPen/>
                </el-icon>
                编辑
            </el-button>
            <span style="display:flex;align-items: flex-end;" v-show="show">
                <el-button type="primary" @click="submitForm(infoRef)">完成</el-button>
                <el-button @click="resetForm(infoRef)">重置</el-button>
                <el-button @click="cancel">取消</el-button>
            </span>
        </div>
    </el-card>
</template>


<script setup>
import {onMounted, ref} from 'vue'

import {getInstructorApi, updateInstructorApi} from "@/apis/instructor";
import {EditPen} from "@element-plus/icons-vue";

import {useUserStore} from "@/stores/user";

const userStore = useUserStore()

let loading = ref(true)
let show = ref(false)
let info = ref({})
let infoForm = ref({})
getInstructorApi(userStore.token).then(
    res => {
        info.value = JSON.parse(JSON.stringify(res.data))
        infoForm.value = res.data
        loading.value = false
    }
)

let infoRef = ref()

const rules = {
    name: [{required: true, message: '请输入姓名!', trigger: 'blur'}],
    title: [{required: true, message: '请输入职称!', trigger: 'blur',}],
    school: [{required: true, message: '请输入所在院校', trigger: 'blur',}],
    dept: [{required: true, message: '请输入所在院系', trigger: 'blur',}],
}

const restaurants = ref([])
const querySearch = (queryString, cb) => {
    const results = queryString
        ? restaurants.value.filter(createFilter(queryString))
        : restaurants.value
    cb(results)
}
const createFilter = (queryString) => {
    return (restaurant) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}

const loadAll = () => {
    return [
        {value: '马克思主义学院'},
        {value: '文物与博物馆学院'},
        {value: '经济管理学院'},
        {value: '数据科学与软件工程学院'},
        {value: '生物化工与环境工程学院'},
        {value: '汽车与电子工程学院'},
        {value: '音乐舞蹈学院'},
        {value: '体育学院'},
        {value: '文学院'},
        {value: '外语教育与国际商务学院'},
        {value: '人工智能学院'},
        {value: '地理与旅游学院'},
        {value: '信息工程学院'},
        {value: '教师教育学院'},
        {value: '美术与设计学院'},
    ]
}
onMounted(() => {
    restaurants.value = loadAll()
})
const submitForm = async formEl => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            await updateInstructorApi(infoForm.value)
            ElMessage.success('编辑成功')
            info.value = JSON.parse(JSON.stringify(infoForm.value))
            show.value = false
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    infoForm.value = JSON.parse(JSON.stringify(info.value))
    formEl.clearValidate()
}
const edit = () => {
    show.value = true
}
const cancel = () => {
    infoForm.value = JSON.parse(JSON.stringify(info.value))
    show.value = false
}
</script>

<style scoped lang="scss">
:deep(.el-form-item__error) {
    left: 30%;
}
</style>